﻿﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="骡窝窝商城" http-equiv="keywords">
    <meta name="description" content="骡窝窝商城">
    <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1">
    <title>骡窝窝商城</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="css/zy.css" type="text/css">
    <link rel="stylesheet" href="css/swiper.min.css" type="text/css">
    <script type="text/javascript" src="js/swiper.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/common.js"></script>

    <script>
        var user= JSON.parse(sessionStorage.getItem("user"));
        console.log(user);
        //获取地址栏信息
        var params = getParams();

        $(function () {
            //发送ajax根据商品分类获取商品明细
            $.get("/products/" + params.id + "/product", function (data) {
                console.log(data);
                $("#product").renderValues(data, {
                    //点击商品将商品id渲染到商品详情页面
                    getJsonHref: function (item, value) {
                        if (value) {
                            var json = JSON.parse(value);
                            console.log(json);
                            $(item).prop("href", "/shopping/productHomePage.html?id=" + json.id + "&sortId=" + json.sortId);
                        }
                    },
                    getSrc: function (item, value) {
                        if (value) {
                            $(item).attr("src", value[0]);
                        }
                    }
                })
            })
            //搜索功能
            $("#sos_tanc").change(function () {
                newsData = [];
                var keyword = $(this).val();
                console.log(keyword);
                $.get("/products", {keyword: keyword}, function (data) {
                    //把查询出来的数据放到容器中
                    $.merge(newsData, data.list);
                    var json = {list: newsData}
                    console.log(json);
                    //渲染数据
                    $("#product").renderValues(json, {
                        getHref: function (item, value) {
                            var href = $(item).data("href")
                            $(item).prop("href", href + value);
                        },
                        getSrc: function (item, value) {
                            $(item).attr("src", value[0]);
                        }
                    })
                })
            })
            //购物车按钮
            $("#GouWuChe").click(function () {
                var href=$(this).data("href");
                $(this).attr("href",href+user.id);
            })
        })

    </script>
</head>
<body>
<!--页面内容-->
<div id="yemnr">
    <!--头部-->
    <div class="toub_beij toub_beij_zy">
        <div class="zhongj_k">
            <div class="logo_k"><a href="index.html"><img src="images/web/logo.jpg"></a></div>
            <div class="shous_k"><span></span><input id="sos_tanc" type="search" input_key="" placeholder="限时疯抢，好物低至1元"
                                                     placeholder_str=""></div>
            <div class="dengl">
                <div class="caid_img" id="zhu_caid"><img src="images/web/cd_1.png"></div>
                <ul class="zhu_daoh" id="daoh_lb">
                    <em></em>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="sort.html">商品分类</a></li>
                    <li><a href="#">扫一扫</a></li>
                    <li><a href="car.html">购物车</a></li>
                    <li class="wu"><a href="#">我的通城</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        //滑动头部透明（针对首页头部用）
        window.onscroll = function () {

            var autoheight = document.body.scrollTop || document.documentElement.scrollTop;
            if (autoheight > 10) {
                $(".toub_beij").css("position", "fixed")
            } else {
                $(".toub_beij").css("position", "relative")
            }
        }
    </script>
    <!--商品列表-->
    <div class="shangp_lieb_beij">
        <div class="sp_daoh">
            <ul>
                <li class="gaodi_paix">
                    <a class="a_paix a_paix_dq">综合<em><img src="images/web/a1.png"></em></a>
                    <div class="xiala">
                        <a href="#">综合</a>
                        <a href="#">高到低</a>
                        <a href="#">低到高</a>
                    </div>
                </li>
                <li><a class="a_paix" href="#">销量</a></li>
                <li><a class="a_paix" href="#">价格</a></li>
                <li class="gaodi_paix">
                    <a class="a_paix a_paix_dq a_paix_fh"><p class="syil_zk"><img src="images/web/syil_zk.png"></p>
                        <em><img src="images/web/a2.png"></em></a>
                    <div class="xiala xiala1">
                        <a href="productList.html"><p class="syil_zk"><img src="images/web/syil_zk.png"></p>缩略</a>
                        <a href="wangid_ShangP_LieB_1.html"><p class="syil_zk syil_zk_1"><img
                                src="images/web/lieb_tub.png"></p>详情</a>
                    </div>
                </li>
            </ul>
        </div>
        <ul class="shangp_lieb_k" id="product">
            <div render-loop="list">
                <li>
                    <a class="aui-list-product-fl-item" render-key="list.json" render-fun="getJsonHref">
                        <div class="lieb_img">
                            <img render-key="list.imgArr" render-fun="getSrc">
                        </div>
                        <div></div>
                        <div class="lieb_txt">
                            <p class="biao" render-html="list.title"></p>
                            <span>¥</span><span class="px26" render-html="list.price"></span>
                            <p class="bend"><em></em>已有评价<i>100+</i> 人</p>
                        </div>
                    </a>
                </li>
            </div>
        </ul>
    </div>

    <!--底部-->
    <div class="dib_bj">
        <div class="diyi">
            <ul>
                <li><a href="#">登录</a></li>
                <p>丨</p>
                <li><a href="#">注册</a></li>
                <p>丨</p>
                <li><a href="#">反馈</a></li>
                <p>丨</p>
                <li><a href="#">返回顶部</a></li>
            </ul>
        </div>
        <div class="liange_bb">
            <div class="bb">
                <a href="#">
                    <div class="bb_img"><img src="images/web/chupb.png"></div>
                    <p>触屏版</p>
                </a>
            </div>
            <div class="bb">
                <a href="#">
                    <div class="bb_img"><img src="images/web/diannb.png"></div>
                    <p class="diann_color">电脑版</p>
                </a>
            </div>
        </div>
        <div class="gs_beian">
            <p>京公网安备：11010602030054号</p>
            <p>京ICP备：14012449号 黔ICP证：B2-20140009号</p>
        </div>
    </div>
    <!--底部导航-->
    <div class="dib_daoh_b">
        <ul>
            <li><a href="/shopping/index.html">
                <div class="fup"><img src="/"></div>
                <p class="dh_dq">首 页</p></a></li>
            <li><a href="sort.html">
                <div class="fup"><img src="images/web/d1.png"></div>
                <p>分 类</p></a></li>
            <li><a data-href="/shopping/shoppingCart.html?id=" id="GouWuChe">
                <div class="fup"><img src="images/web/d3.png"></div>
                <p>购物车</p></a></li>
            <li><a href="我的.html">
                <div class="fup"><img src="images/web/d4.png"></div>
                <p>我</p></a></li>
        </ul>
    </div>
</div>

<!--大框div-->
</div>
<!--搜索页面-->
<div id="shous_yem">
    <div class="toub_beij">
        <div class="zhongj_k zhongj_k_tanc">
            <div class="logo_k logo_k_fanh"><a id="sous_fanh_sy"><img class="fanh_ann" src="images/web/fanh.png"></a>
            </div>
            <div class="shous_k shous_k_ganc">
                <a href="#" class="sous_ann_k"><span class="sous_ann"></span></a>
                <input type="search" placeholder="限时疯抢，好物低至1元" placeholder_str="">
            </div>
        </div>
        <div class="remen_sos">
            <p>热门搜索：</p>
            <ul>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">游戏本</a></li>
                <li><a href="#">工作站笔记本</a></li>
                <li><a href="#">平板电脑</a></li>
                <li><a href="#">台式机</a></li>
                <li><a href="#">一体机服务器</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

<script type="text/javascript">
    window.onload = function () {
        onload2();
        var TheMenu = document.getElementById('zhu_caid');
        var LieBiao = document.getElementById('daoh_lb');
        var Html = document.getElementsByTagName("html")[0];//0 第一个数组
        TheMenu.onclick = function (event) {
            if (LieBiao.style.display == 'block') {
                LieBiao.style.display = 'none';
            }
            else {
                LieBiao.style.display = 'block';
            }
            event.stopPropagation();//阻止冒泡事件
        }
        Html.onclick = function () {
            LieBiao.style.display = 'none';
        }
    };

    function onload2() {
        var Sos = document.getElementById('sos_tanc');
        var ShouYe = document.getElementById('yemnr');
        var SosYe = document.getElementById('shous_yem');
        var SosFanHui = document.getElementById('sous_fanh_sy');
       /* Sos.onclick = function () {
            ShouYe.style.display = ('none');
            SosYe.style.display = ('block');
        }
        SosFanHui.onclick = function () {
            ShouYe.style.display = ('block');
            SosYe.style.display = ('none');
        }*/
    };


</script>